<template>
  <div>
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @cancel="handleCancel"
    />
    <van-list>
      <van-cell v-for="data in computedCinemaList" :key="data.cinemaId">
        <h3>{{data.name}}</h3>
        <div class="address">{{data.address}}</div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import Vue from 'vue'
import { Search, List, Cell } from 'vant'
import { mapState, mapActions } from 'vuex'

Vue.use(Search).use(List).use(Cell)

export default {
  name: '',

  data () {
    return {
      value: ''
    }
  },
  computed: {
    ...mapState('CityModule', ['cityId']),
    ...mapState('CinemaModule', ['cinemaLists']),
    computedCinemaList () {
      if (this.value === '') {
        return []
      }
      return this.cinemaLists.filter(item => item.name.toUpperCase().includes(this.value.toUpperCase()) || item.address.includes(this.value.toUpperCase()))
    }
  },
  methods: {
    ...mapActions('CinemaModule', ['getCinemaList']),
    handleCancel () {
      this.$router.replace('/cinema')
    }
  },
  mounted () {
    if (this.cinemaLists.length === 0) {
      // 异步请求数据
      this.getCinemaList(this.cityId)
    } else {
      console.log('缓存')
    }
  }
}

</script>
<style scoped lang='less'>
li{
  padding: 5px;
  .address{
    font-size: 12px;
  }
}
</style>
